<template>
	<view>
		<!-- 顶部导航条 -->
		<u-navbar title="翰思运动健康" placeholder>
			<view class="flex" slot="left">
				<u-icon name="map" size="20" />
				<text>{{location.cityName || ''}}</text>
			</view>
		</u-navbar>
		<!-- 搜索框 -->
		<view class="searchBox flex">
			<u--image v-if="faceOpen" @click="goRouter()" :showLoading="true" :src="imgUrl + 'scanFace.png'" width="60rpx" height="60rpx" />
			<u-search placeholder="请输入场馆名称" shape="round" bgColor="#fff" @click="goSearch" height="76rpx" :showAction="false" disabled />
			<u-icon size="50rpx" name="kefu-ermai" color="#000000" label="客服" labelPos="bottom" labelSize="24rpx" />
		</view>
		<!-- 门店列表 -->
		<view style="padding: 0 20rpx 1rpx 20rpx;">
			<view class="store" v-for="(item, index) in shopList" :key="index">
				<view @click="goRouter(`/pagesSubPack/store/detail?sign=${item.sign}`)">
					<image :src="item.images[0]" mode="widthFix" />
					<image :src="item.images[1]" mode="widthFix" />
				</view>
				<view class="distance u-border-bottom">
					<view>{{ item.name }}</view>
					<text>距离{{ item.distance}}公里</text>
				</view>
				<view class="unfold">
					<text>{{ item.storeType == 'gym' ? '约课' : '申请'}}</text>
					<view class="flex" @click="showSign = showSign == item.sign ? '' : item.sign">
						<u-icon :name="item.state ? 'arrow-down' : 'arrow-up'" size="26rpx" />
						<text>{{ showSign == item.sign ? '收起' : '展开' }}</text>
					</view>
				</view>
				<!-- 约课、申请 -->
				<appointment-ourse v-if="showSign == item.sign" :store="item" />
			</view>
		</view>
	</view>
</template>

<script>
import { imgUrl } from "@/utils/baseUrl.js";
import { getShopList, getLocationAddr, baseConfig } from '@/api/store.js';
import appointmentOurse from '@/components/appointmentOurse.vue';
export default {
	components: { appointmentOurse },
	data() {
		return {
			imgUrl,
			location: null,
			faceOpen: 0,
			pageNum: 1,
			totalPage: 1,
			shopList: [],
			showSign: '',
			timer: null
		}
	},
	onLoad() {
		baseConfig().then(res => this.faceOpen = res.face_open)
	},
	onReachBottom() {
		this.timer && clearTimeout(this.timer);
		this.timer = setTimeout(() => this.getShop(), 500);
	},
	onShow() {
		!this.location && this.getLocation()
	},
	watch: {
		location(val) {
			this.getShop()
			getLocationAddr(val).then(res => this.location.cityName = res.city);
		}
	},
	// 下拉加载，上拉刷新
	methods: {
		// 刷新页面数据
		refreshPage() {
			this.shopList = []
			this.pageNum = 1
			this.totalPage = 1
			getShop()
		},
		// 获取门店列表
		getShop() {
			if(this.pageNum > this.totalPage) return
			const param = {
				pageNum: this.pageNum,
				pageSize: 10,
				...this.location
			}
			getShopList(param).then(res => {
				const {pages, rows} = res
				if(this.pageNum == 1 && rows.length) this.showSign = rows[0].sign
				this.shopList = [...this.shopList, ...rows]
				this.totalPage = pages
				this.pageNum++
			})
		},
		// 页面跳转
		goRouter(url) {
			uni.navigateTo({ url })
		},
		// 获取用户当前定位
		getLocation() {
			const _this = this
			uni.showLoading({
				title: '正在获取当前定位请稍等...'
			})
			uni.getLocation({
				type: 'gcj02',
				isHighAccuracy: true,
				complete: () => uni.hideLoading(),
				success(res) {
					const {latitude, longitude} = res
					_this.location = {latitude, longitude}
				},
				fail(err) {
					if(err.errMsg == "getLocation:fail:ERROR_NETWORK" || err.errMsg == "getLocation:fail:timeout") {
						uni.showModal({
							title: `提示异常`,
							content:`您当前网络不佳，建议您切换一下网络后重新进入小程序!${err.errMsg}`,
							showCancel: false,
							confirmText: '确定'
						})
						return
					}
					uni.showModal({
						title: `提示异常`,
						content: `您当前未授权定位，如不授权，将无法正常使用定位功能！`,
						confirmText: '去授权',
						success: (res) => res.confirm && uni.openSetting()
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.searchBox {
	padding: 20rpx;
	position: relative;
	justify-content: space-between;
	gap: 20rpx;
}
.store {
	background: #fff;
	border-radius: 0 0 24rpx 24rpx;
	margin-bottom: 20rpx;
	> view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	image {
		width: calc(50% - 5rpx);
		height: 100%;
	}
	.distance {
		justify-content: space-between;
		padding: 30rpx 0;
		font-weight: bold;
		margin: 0 30rpx;
		text {
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.4);
		}
		view {
			color: #202020;
			font-size: 30rpx;
		}
	}
	.unfold {
		padding: 30rpx;
		> text {
			color: #545163
		}
		view text {
			font-weight: bold;
			color: rgba(0, 0, 0, 0.4);
			font-size: 22rpx;
			margin-left: 10rpx;
		}
	}
}
</style>
